// ==UserScript==
// @name         test - async
// @namespace    http://tampermonkey.net/
// @version      2025-07-15
// @description  genSql
// @author       tako
// @match        *://*/*
// ==/UserScript==

// 自执行匿名函数（Self-Executing Anonymous Function），
// 也称为立即调用函数表达式（IIFE，Immediately Invoked Function Expression），
// 是 JavaScript 中一种常见的函数模式。
// 特点
// - ​匿名函数​​：没有函数名
// - ​立即执行​​：定义后立即调用
// - ​创建独立作用域​​：避免变量污染全局命名空间
// 作用
// - ​创建私有作用域​​：防止变量泄露到全局作用域
// - ​模块化开发​​：在 ES6 模块系统之前广泛用于模块化
// - ​避免命名冲突​​：隔离变量和函数
(function () {
    'use strict';
    console.log('开始执行脚本...');

    /**
     * 使用 async 关键字将函数标记为异步函数（返回值为Promise对象的函数）
     * async标记的异步函数中，可以使用 await 关键字等待 Promise 对象的结果
     */
    async function fetchData1() {
        // 这种做法会在每个 fetch 调用完成后才开始下一个调用，可能导致性能问题
        const a = await fetch("https://localhost/api/data/a");
        const b = await fetch("https://localhost/api/data/b");
        const c = await fetch("https://localhost/api/data/c");
    }

    async function fetchData2() {
        // 使用 Promise.all() 并行处理多个异步操作
        // 这种做法会同时发起所有请求，等待所有请求完成后再处理结果，
        // 提高性能，减少总等待时间
        const promisea = fetch("https://localhost/api/data/a");
        const promiseb = fetch("https://localhost/api/data/b");
        const promisec = fetch("https://localhost/api/data/c");

        const [a, b, c] = await Promise.all([promisea, promiseb, promisec]);
    }

    async function fetchData3() {
        // 在 forEach 中使用 async 函数时，不能直接使用 await，
        // 因为 forEach 不会等待异步操作完成
        [1, 2, 3].forEach(async (item) => {
            const response = await fetch(`https://localhost/api/data/${item}`);
            const data = await response.json();
            console.log(data);
        });
    }

    async function fetchData4() {
        // 使用 for...of 循环可以正确等待每个异步操作完成
        for (const item of [1, 2, 3]) {
            const response = await fetch(`https://localhost/api/data/${item}`);
            const data = await response.json();
            console.log(data);
        }
    }

    async function fetchData5() {
        // 使用 for await...of 循环可以处理异步迭代器，
        // 适用于需要异步处理的迭代操作
        const promisea = fetch("https://localhost/api/data/a");
        const promiseb = fetch("https://localhost/api/data/b");
        const promisec = fetch("https://localhost/api/data/c");
        for await (const result of [promisea, promiseb, promisec]) {
            console.log(result);
        }
    }
})();